<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>爱趣分期</title>
    <link href="__PUBLIC__/Installment/css/css.css" rel="stylesheet" />
</head>
<body>
    <div class="head">
        <img src="__PUBLIC__/Installment/images/pic1.png"/>
    </div>
    <div class="content">
        <div class="input-body">
            <input type="number" name="phone" id="phone" placeholder="请输入手机号码" class="phone"/>
            <label class="red-text" id="phonewarn">请输入有效的电话号码</label>
            <div class="getcode">
                <input type="number" name="code" id="code" placeholder="输入验证码" class="code" />
                <button id="button1" class="button1" onclick="getcode()" >
                    <img id="back_pic" src="__PUBLIC__/Installment/images/button1.png" />
                    <div class="change" id="codetime"></div>
                </button>
            </div>
            <label class="red-text" id="codewarn">验证码错误</label>
            <button class="button2" onclick="register()"><img src="__PUBLIC__/Installment/images/button2.png"/></button>
        </div>
        <div class="back-img"><img src="__PUBLIC__/Installment/images/pic2.jpg"/></div>
    </div>



    <script src='__PUBLIC__/jquery.js'></script>
    <script type="text/javascript">
        var time;//倒计时时间
        var star;//计时器
        var code;//验证码
        var mobile      = document.getElementById("phone").value;
        var button      = document.getElementById("button1");//获取验证码按钮
        var pic         = document.getElementById("back_pic");//按钮图片
        var phonewarn   = document.getElementById('phonewarn');//电话号码提示
        var codewarn    = document.getElementById('codewarn');//验证码提示
        var phonenumber = document.getElementById('phone');//电话号码输入框
        var codeId      = document.getElementById('code');//验证码输入框


        phonenumber.onfocus=function () {
            phonewarn.style.opacity='0';
        }
        codeId.onfocus=function () {
            codewarn.style.opacity='0';
        }

        ///////////////////////倒计时
        function changetime() {
            time = time - 1;
            document.getElementById("codetime").innerHTML = time + "s";
            if (time < 0) {
                clearInterval(star);
                pic.src = "__PUBLIC__/Installment/images/button1.png";
                document.getElementById("codetime").innerHTML = null;
                button.disabled = false;
            }
        }

        ///////////////////////获取验证码
        function getcode() {

             var justphone=phone();
             if (justphone == true) {
                 time = 60;
                 document.getElementById("codetime").innerHTML = time + "s";
                 pic.src = "__PUBLIC__/Installment/images/btn_send1.png";
                 star = setInterval(changetime, 1000);
                 button.disabled = true;
                 createcode();
             }
             else {
                 phonewarn.style.opacity='1';
             }
        }

        ///////////////创建验证码
        function createcode() {
            $.post("http://jrapi.86tudi.com/Share/send", {
                'mobile':document.getElementById("phone").value,
            },function (data, status) {
                alert(data.code)
            });
        }

        ////////////////////////注册
        function register() {
             $.post("http://jrapi.86tudi.com/Share/register", {
                'mobile':document.getElementById("phone").value,
                'code':document.getElementById("code").value,
            },function (data, status) {
                if(data.ret == '1001'){
                    alert(data.code)
                }else{
                    alert(data.code)
                    // codewarn.style.opacity='1';
                }

            });

        }

        //////////////////////判断电话号码
        function phone() {
            var re = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if (document.getElementById("phone").value.match(re)) {
                return true;
            }
            else {
                return false;
            }
        }


    </script>
</body>
</html>
